<template>
  <div class="page_body dialog_show'">
    <div class="home_top">
      <img
        class="home_top_back"
        src="../../assets/image/black_icon01.png"
        alt="返回"
        @click="toBackFn()"
      />
      <div class="home_top_title">{{ topTitle }}</div>
    </div>
    <div class="referee_register_body">
      <div
        style="
          width: 100vw;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <div class="referee_register_from_box">
          <!-- 实名认证栏 -->
          <div>
            <div class="referee_register_from_item border_item">
              <div class="border_item_popup_box" style="height: 100%">
                <div class="referee_register_from_upload_img">
                  <div class="border_item_title">
                    <div class="border_item_title_tips">*</div>
                    个人免冠照片
                  </div>
                  <div
                    class="border_item_popup no_value_item"
                    style="width: 4.8rem; height: 0.94rem; line-height: 0.94rem"
                  >
                    请选择大小不超过3M的免冠照
                  </div>
                </div>

                <div class="upload_img_box">
                  <img
                    v-if="userData.photo == null || userData.photo == ''"
                    class="upload_img_box_icon"
                    src="../../assets/image/upload_img_bg03.png"
                  />
                  <img
                    v-if="userData.photo != null && userData.photo != ''"
                    class="upload_img_box_icon"
                    :src="userData.photo"
                  />
                  <input
                    type="file"
                    accept="image/*"
                    ref="uploadImg"
                    id="upload_img_btn"
                    @change="uploadImgBtn($event)"
                  />
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>
            <div class="referee_register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                姓名
              </div>
              <input
                class="referee_register_from_item_input"
                placeholder="请输入姓名"
                type="text"
                v-model="userData.name"
                maxlength="6"
              />
            </div>

            <div class="referee_register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                国籍
              </div>
              <div class="border_item_popup_box" @click="openPopup('country')">
                <div
                  :class="[
                    userData.country == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{
                    userData.country == "请选择"
                      ? "请选择您的国籍"
                      : userData.country
                  }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="referee_register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                请选择性别
              </div>
              <div class="border_item_popup_box" @click="openPopup('sex')">
                <div
                  :class="[
                    userData.sex == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{
                    userData.sex == "请选择" ? "请选择您的性别" : userData.sex
                  }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="referee_register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证件类型
              </div>
              <div
                class="border_item_popup_box"
                @click="openPopup('identityType')"
              >
                <div
                  :class="[
                    identityTypevalueObj.label == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{
                    identityTypevalueObj.label == "请选择"
                      ? "请选择您的证件类型"
                      : identityTypevalueObj.label
                  }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="referee_register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证件号
              </div>
              <input
                class="referee_register_from_item_input"
                placeholder="请输入您的证件号"
                type="text"
                v-model="userData.identity_number"
                maxlength="18"
              />
            </div>

            <!-- <div class="referee_register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                政治面貌
              </div>
              <div
                class="border_item_popup_box"
                @click="openPopup('political_status')"
              >
                <div
                  :class="[
                    userData.political_status == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{
                    userData.political_status == "请选择"
                      ? "请选择您的政治面貌"
                      : userData.political_status
                  }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div> -->

            <div
              class="referee_register_from_item upload_img_item"
              style="justify-content: space-around; margin-top: 0.4rem"
              v-show="userData.identity_type != 0"
            >
              <div class="upload_file_box" v-show="userData.identity_type == 1">
                <img
                  v-if="
                    userData.identity_up == null || userData.identity_up == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/identity_up_img01.png"
                />
                <img
                  v-if="
                    userData.identity_up != null && userData.identity_up != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_up"
                />

                <input
                  type="file"
                  accept="image/*"
                  ref="identityUp"
                  class="upload_file_box_input"
                  @change="uploadIdentityBtn($event)"
                />
                <div class="upload_file_box_btn">+上传身份证人像面</div>
              </div>
              <div class="upload_file_box" v-show="userData.identity_type == 1">
                <img
                  v-if="
                    userData.identity_down == null ||
                    userData.identity_down == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/identity_down_img01.png"
                />
                <img
                  v-if="
                    userData.identity_down != null &&
                    userData.identity_down != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_down"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="identityDown"
                  class="upload_file_box_input"
                  @change="uploadIdentityDownBtn($event)"
                />
                <div class="upload_file_box_btn">+上传身份证国徽面</div>
              </div>
              <div class="upload_file_box" v-show="userData.identity_type == 2">
                <img
                  v-if="
                    userData.identity_up == null || userData.identity_up == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/upload_img_bg02.png"
                />
                <img
                  v-if="
                    userData.identity_up != null && userData.identity_up != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_up"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="uploadUpImg"
                  class="upload_file_box_input"
                  @change="uploadUpImgBtn($event)"
                />
                <div class="upload_file_box_btn">+护照个人信息页</div>
              </div>
              <div class="upload_file_box" v-show="userData.identity_type == 2">
                <img
                  v-if="
                    userData.identity_down == null ||
                    userData.identity_down == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/upload_img_bg02.png"
                />
                <img
                  v-if="
                    userData.identity_down != null &&
                    userData.identity_down != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_down"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="uploadDownImg"
                  class="upload_file_box_input"
                  @change="uploadDownImgBtn($event)"
                />
                <div class="upload_file_box_btn">+护照有效签证页</div>
              </div>
              <div
                class="upload_file_box"
                v-show="
                  userData.identity_type == 3 || userData.identity_type == 4
                "
              >
                <img
                  v-if="
                    userData.identity_up == null || userData.identity_up == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/upload_img_bg02.png"
                />
                <img
                  v-if="
                    userData.identity_up != null && userData.identity_up != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_up"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="uploadUpImg"
                  class="upload_file_box_input"
                  @change="uploadUpImgBtn($event)"
                />
                <div class="upload_file_box_btn">+证件照片</div>
              </div>
            </div>
          </div>
          <div class="referee_register_from_send_btn" @click="submitDataFn()">
            确认
          </div>
        </div>
      </div>
    </div>
    <!-- popup选择器 -->
    <mt-popup
      v-model="popupVisible"
      position="bottom"
      @touchmove.native.stop.prevent
    >
      <div class="popup_body">
        <div class="popup_body_top">
          <div @click="popupCancelFn()" class="popup_body_top_cancel">取消</div>
          <div @click="popupConfirmFn()" class="popup_body_top_confirm">
            确认
          </div>
        </div>
        <mt-picker
          style="width: 100%"
          ref="popupPicker"
          :slots="pickerSlots"
          :visibleItemCount="visibleItemCount"
          :valueKey="valueKey"
          @change="onPickerChange"
        ></mt-picker>
      </div>
    </mt-popup>
  </div>
</template>
<style src="../../assets/css/sign/perfectReferees.css" scoped></style>

<script>
import { MessageBox, Indicator, Toast } from "mint-ui";
import nationalityListData from "../../../public/data/nationality.json";

export default {
  name: "perfectReferees",
  components: {},
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      topTitle: "",

      userData: {
        name: "", // 姓名
        photo: "", // 照片
        sex: "请选择", // 性别
        country: "请选择", // 国籍
        identity_type: 0, // 证件类型 1：身份证 2：护照 3：港、澳、台胞证件 4：其它
        identity_number: "", // 证件号
        identity_up: "", // 证件正面
        identity_down: "", // 证件反面
      },
      uploadUrl: "", // 提交用图片路径Q
      // popup选择相关
      id_number: "", //验证证件号 是否跟输入证件号相同
      id_name: "", //验证 名字 是否跟输入名字相同
      pickerSlots: [], // popup中Slots
      visibleItemCount: 5, // picker备选数
      popupVisible: false, // popup显示
      popupKey: "", // 当前选择器内容
      valueKey: "", // 当 values 为对象数组时，作为文本显示在 Picker 中的对应字段的字段名
      nationalitySlots: [
        {
          flex: 1,
          values: [],
          textAlign: "center",
        },
      ], // 国籍slots
      nationalityChange: "请选择", // 国籍选择值
      sexSlots: [
        {
          flex: 1,
          values: ["请选择", "男", "女"],
          textAlign: "center",
        },
      ], // 性别slots
      sexChange: "请选择", // 性别选择
      identityTypeSlots: [
        {
          flex: 1,
          values: ["请选择", "身份证", "护照", "港、澳、台胞证件", "其他"],
          textAlign: "center",
        },
      ], // 证件类型slots
      identityTypeChange: "请选择", // 证件类型选择
      identityTypevalueObj: {
        value: 0,
        label: "请选择",
      }, // 证件类型选择值

      politicalSlots: [
        {
          flex: 1,
          values: ["请选择", "党员", "群众"],
          textAlign: "center",
        },
      ], // 政治面貌slots
      politicalChange: "请选择", // 政治面貌选择
    };
  },
  created: function () {
    let nationalityList = ["请选择"];
    nationalityListData.forEach((element) => {
      nationalityList.push(element.name_cn);
      this.nationalitySlots[0].values = nationalityList;
    });
  },
  methods: {
    // 打开popup选择
    openPopup: function (key) {
      let that = this;

      this.popupKey = key;
      this.valueKey = "";
      this.popupVisible = true;
      if (key == "country") {
        this.pickerSlots = this.nationalitySlots;
        this.$refs.popupPicker.setSlotValue(0, this.userData.country);
      }
      if (key == "identityType") {
        this.pickerSlots = this.identityTypeSlots;
        this.$refs.popupPicker.setSlotValue(0, this.identityTypevalueObj.label);
      }

      if (key == "political_status") {
        this.pickerSlots = this.politicalSlots;
        this.$refs.popupPicker.setSlotValue(0, this.userData.political_status);
      }
      if (key == "sex") {
        this.pickerSlots = this.sexSlots;
        this.$refs.popupPicker.setSlotValue(0, this.userData.sex);
      }
    },

    // picker选择
    onPickerChange: function (picker, values) {
      if (this.popupKey == "country") {
        if (values[0]) {
          if (values[0] == "") {
            this.nationalityChange = "请选择";
          } else {
            this.nationalityChange = values[0];
          }
        }
      }
      if (this.popupKey == "identityType") {
        if (values[0]) {
          if (values[0] == "") {
            this.identityTypeChange = "请选择";
          } else {
            this.identityTypeChange = values[0];
          }
        }
      }

      if (this.popupKey == "political_status") {
        if (values[0]) {
          if (values[0] == "") {
            this.politicalChange = "请选择";
          } else {
            this.politicalChange = values[0];
          }
        }
      }

      if (this.popupKey == "sex") {
        if (values[0]) {
          if (values[0] == "") {
            this.sexChange = "请选择";
          } else {
            this.sexChange = values[0];
          }
        }
      }
    },

    // popup弹窗取消
    popupCancelFn: function () {
      let key = this.popupKey;
      if (key == "country") {
        this.nationalityChange = this.userData.country;
      }
      if (key == "identityType") {
        this.identityTypeChange = this.identityTypevalueObj.label;
      }

      if (key == "political_status") {
        this.politicalChange = this.userData.political_status;
      }

      if (key == "sex") {
        this.sexChange = this.userData.sex;
      }

      this.popupVisible = false;
      this.popupObjVisible = false;
    },

    // popup弹窗确认
    popupConfirmFn: function () {
      let key = this.popupKey;
      if (key == "country") {
        this.userData.country = this.nationalityChange;
      }
      if (key == "identityType") {
        if (this.identityTypevalueObj.label != this.identityTypeChange) {
          this.userData.identity_up = "";
          this.$refs.identityUp.value = "";
          this.userData.identity_down = "";
          this.$refs.identityDown.value = "";
        }
        this.identityTypevalueObj.label = this.identityTypeChange;
        if (this.identityTypeChange === "请选择") {
          this.identityTypevalueObj.value = 0;
        } else if (this.identityTypeChange === "身份证") {
          this.identityTypevalueObj.value = 1;
        } else if (this.identityTypeChange === "护照") {
          this.identityTypevalueObj.value = 2;
        } else if (this.identityTypeChange === "港、澳、台胞证件") {
          this.identityTypevalueObj.value = 3;
        } else {
          this.identityTypevalueObj.value = 4;
        }
        this.userData.identity_type = this.identityTypevalueObj.value;
      }

      if (key == "political_status") {
        this.userData.political_status = this.politicalChange;
      }
      if (key == "sex") {
        this.userData.sex = this.sexChange;
      }

      this.popupVisible = false;
      this.popupObjVisible = false;
    },

    // 提交信息
    submitDataFn: function () {
      if (
        this.userData.photo == "" ||
        this.userData.name == "" ||
        this.userData.country == "" ||
        this.userData.sex == "" ||
        this.identityTypevalueObj.value == "" ||
        this.identityTypevalueObj.value == 0 ||
        this.userData.identity_number == "" ||
        this.userData.political_status == "" ||
        this.userData.political_status == "请选择" ||
        this.userData.identity_up == ""
      ) {
        Toast({
          message: "请先完善身份信息",
        });
        return false;
      } else {
        if (
          (this.identityTypevalueObj.value == 1 ||
            this.identityTypevalueObj.value == 2) &&
          this.userData.identity_down == ""
        ) {
          Toast({
            message: "请先完善身份信息",
          });
          return false;
        }

        if (this.identityTypevalueObj.value == 1) {
          // 验证身份正则
          let idNumberText =
            /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
          if (!idNumberText.test(this.userData.identity_number)) {
            Toast({
              message: "身份证格式不正确",
            });
            return false;
          } else {
            if (this.userData.identity_number != this.id_number) {
              Toast({
                message:
                  "证件号码与上传照片中证件号码不符 该证件号为" +
                  this.id_number,
              });
              return false;
            }
            if (this.userData.name != this.id_name) {
              Toast({
                message: "姓名与上传照片中姓名不符 该姓名为" + this.id_name,
              });
              return false;
            }
          }
        }
      }
      let that = this;
      let url = "/mobile/completeRefereeLittle";

      let data = {
        name: this.userData.name, // 姓名
        photo: this.userData.photo, // 照片
        sex: this.userData.sex, // 性别
        country: this.userData.country, // 国籍
        identity_type: this.userData.identity_type, // 证件类型 1：身份证 2：护照 3：港、澳、台胞证件 4：其它
        identity_number: this.userData.identity_number, // 证件号
        identity_up: this.userData.identity_up, // 证件正面
        identity_down: this.userData.identity_down, // 证件反面
      };

      MessageBox.confirm("确认提交?").then(() => {
        Indicator.open();
        that.axios
          .post(url, data)
          .then((response) => {
            Indicator.close();
            if (response.code == 0) {
              // that.$store.commit("set_isRegister", 2);
              // sessionStorage.removeItem("REFEREEREGISTEROBJ");
              Toast({
                message: "注册成功",
                duration: 3000,
              });

              // 跳转签到页
              let id = that.$route.query.id;
              that.$router.replace({
                name: "signIn",
                query: {
                  id: id,
                },
              });
            } else {
              Toast({
                message: response.msg,
                duration: 3000,
              });
            }
          })
          .catch(function (error) {
            Indicator.close();
            console.log(error);
          });
      });
    },
    // 上传头像图片
    uploadImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadImg.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            let image = new Image();
            image.onload = function () {
              that.uploadImgFn(res.target.result);
              // } else {
              //   that.$refs.uploadImg.value = "";
              //   Toast({
              //     message: "照片尺寸不合规",
              //     duration: 3000,
              //   });
              // }
            };
            image.src = res.target.result;
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传头像图片到服务器
    uploadImgFn: function (imgData) {
      let that = this;
      let url = "/upload/uploadPhoto";
      let data = {
        image: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let path = response.image;
            that.uploadUrl = response.image;
            that.userData.photo = path;
            console.log(that.userData.photo, "2222");
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 上传身份证正面
    uploadIdentityBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        that.$refs.identityUp.value = "";
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadIdentityFn(res.target.result, 1);
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传身份证背面
    uploadIdentityDownBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        that.$refs.identityDown.value = "";
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadIdentityFn(res.target.result, 2);
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传身份证到服务器
    uploadIdentityFn: function (imgData, type) {
      let that = this;
      let url = "/upload/uploadCard";
      let uploadType = type;
      let data = {
        type: uploadType,
        image: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let path = response.image;
            if (uploadType == 1) {
              that.userData.uploadUrl = response.image;
              that.id_name = response.idname;
              that.id_number = response.idnumber;
              that.userData.identity_up = path;
            } else {
              that.userData.identity_down = path;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 上传证件照片正面
    uploadUpImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadUpImg.value = "";
      } else {
        let reader = new FileReader();
        reader.onload = (res) => {
          that.uploadCardImgFn(res.target.result, 1);
        };
        reader.readAsDataURL(file);
      }
    },

    // 上传证件照片背面
    uploadDownImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadDownImg.value = "";
      } else {
        let reader = new FileReader();
        reader.onload = (res) => {
          that.uploadCardImgFn(res.target.result, 2);
        };
        reader.readAsDataURL(file);
      }
    },

    // 上传证件图片到服务器
    uploadCardImgFn: function (imgData, type) {
      let that = this;
      let url = "/upload/uploadImage";
      let uploadType = type;
      let data = {
        source: 2,
        image: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let path = response.image;
            if (uploadType == 1) {
              that.userData.identity_up = path;
            } else {
              that.userData.identity_down = path;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 返回
    toBackFn: function () {
      console.log("aaa");
    },
  },
  watch: {
    userData: {
      handler(newval) {
        sessionStorage.setItem("REFEREEREGISTEROBJ", JSON.stringify(newval));
      },
      deep: true,
    },
  },
};
</script>
